<template>
  <div class="xh">
    <!-- 消耗详情 -->
    <el-dialog title="消耗详情" :visible.sync="dialogVisible" width="800px">
      <xhDetail :id="id" :time="timeArray" :value="value" :page="page" :size="pageSize"></xhDetail>
    </el-dialog>


    <div class="xh_select">
        <el-input v-model="value" size="small" placeholder="搜索广告系列" @keyup.enter.native="getFindUserUfconsume">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getFindUserUfconsume" />
        </el-input>

      <!-- <el-input placeholder="搜索广告系列" v-model="value" class="input-with-select" size="small" @keyup.enter.native="getFindUserUfconsume" style="width: 200px">
        <el-button slot="append" icon="el-icon-search" @click="getFindUserUfconsume"></el-button>
      </el-input> -->
    </div>
    <el-table :data="xhData"
      sortable="custom"
      @sort-change="tableSortChange"
      :header-cell-class-name="headerStyle">
      <el-table-column label="时间" prop="createtime" sortable></el-table-column>
      <el-table-column label="类型">
        <span>消耗</span>
      </el-table-column>
      <el-table-column label="广告系列">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.campaign_name}}</span> -->
          <div @click="getFindUserUfconsumeDetails(scope.row.campaign_id)" class="campaign_name">
            <span>{{scope.row.campaign_name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="消耗金额"
        align="right"
      >
      <template slot-scope="scope">
           <div style="text-align:right;">
          {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.consumption)" :duration="1" class="num"></countTo>
           </div>
        </template>
      </el-table-column>
      <el-table-column
        label="税费"
        align="right"
      >
       <template slot-scope="scope">
           <div style="text-align:right;">
          {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.expenses)" :duration="1" class="num"></countTo>
           </div>
        </template>
      </el-table-column>
      <el-table-column
        label="服务费"
        align="right"
      >
        <template slot-scope="scope">
           <div style="text-align:right;">
          {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.servicecharge)" :duration="1" class="num"></countTo>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="广告系列余额"
      align="right">
         <template slot-scope="scope">
            <div style="text-align:right;">
         {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.orderBalance)" :duration="1" class="num"></countTo>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      @pageSize="changePageSize"
      @page="changePage"
      :page="page"
      :pageSize="pageSize"
    >
    </pagination>
  </div>
</template>

<script>
import { findUserUfconsume, generalView, campaignTotal} from "@/api/finace.js";
import xhDetail from './xh_detail'
import countTo from 'vue-count-to'
import pagination from '@/components/elementComponents/pagination.vue'
import cellHeader from '@/components/cell-header.vue'
export default {
  name: "Xh",
  data() {
    return {
      dialogVisible: false,
      value: '',
      activeName: "first",
      page: 1,
      pageSize: 10,
      total: 0,
      time: '',
      sort: 'DESC'
    };
  },
  components: {
    pagination,
    countTo,
    cellHeader,
    xhDetail
  },
  props:{
    activeName: String,
    timeArray: {
      type: Array,
        default: (res) => {
        return
      }
    }
  },
  computed: {
    type() {
      return this.$store.state.user.unit;
    },
    isSymol() {
      return this.$store.state.user.unit === 'USD' ? '$' : '￥'
    },
    teamId() {
      return this.$store.state.team.teamId
    }
  },
  watch: {
    page(newV,oldV){
      this.page = newV
      this.getFindUserUfconsume()
    },
    pageSize(newV,oldV){
      this.pageSize = newV
      this.getFindUserUfconsume()
    },
    type: {
      handler: function(newV, oldV) {
        this.type = newV
        this.getFindUserUfconsume()
      }
    },
    timeArray: {
      handler: function(newV, oldV) {
        this.timeArray = newV
        this.page = 1
        this.pageSize = 10
        this.getFindUserUfconsume()
      }
    },
    activeName: {
      handler: function(newV, oldV) {
        if(newV === 'first') {
         this.value = ''
         this.page = 1
         this.pageSize = 10
         this.getFindUserUfconsume()
        }
      },
      teamId: {
        deep: true,
        handler: function(newV, oldV) {
          this.teamId = newV
          this.getFindUserUfconsume()
        }
      }
    }
  },
  mounted() {
    this.getFindUserUfconsume()
  },
  methods: {
    headerStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex > 2) {
          return 'right-align'
        }
      },
    // 排序
    tableSortChange(obj) {
      if (obj.order === 'descending' || !obj.order) {
         this.sort = 'DESC'
      } else  {
        this.sort = 'ASC'
      }
      this.getFindUserUfconsume()
    },
    // 获取选择时间
    // 获取一页数量
    changePageSize(data) {
      this.pageSize = data
    },
    // 获取页数
    changePage(data) {
      this.page = data
    },
    // 获取所有消耗
    async getFindUserUfconsume() {
      const data = {
          page: this.page,
          size: this.pageSize,
          type: this.type,
          search: this.value,
          startTime: this.timeArray[0],
          endTime: this.timeArray[1],
          campaign_id: '',
          teamId: this.teamId,
          sort: this.sort
        }
      const res = await findUserUfconsume(data)
      if (res.data.code === 20000) {
        this.xhData = res.data.data.list;
        this.xhData.forEach(item=> {
          if (item.campaign_name.indexOf('_3YData_') !== -1) {
              let str = item.campaign_name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              item.campaign_name = str.substring(gang).substring(1,str.length)
            }
        })
        this.total = res.data.data.total;
        this.$forceUpdate()
      } else return false;
    },
    // 获取消耗详情
    async getFindUserUfconsumeDetails(id) {
      this.id= id
      this.dialogVisible=true
    },
  },
};
</script>


<style lang="scss" scoped>
.right-align .cell {
  color: red !important;

}
.campaign_name{
  cursor: pointer;
  width: 200px;
  color: #24bebe;
}
.num{
  margin-left: -5px;
  text-align: right;
}
.xh_select {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  .el-input{
    width: 12%;
    position: relative;
    top: 2px;
  }
  span {
    font-size: 14px;
    position: relative;
    right: 20px;
    left: 10px;
    top: 20px;
  }
  .choose {
    position: absolute;
    right: 0;
    top: 5px;
  }
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
div.is-right {
   text-align: right !important;
   .cell {
    text-align: right !important;
   }
 }
</style>
